<template>
  <div class="transaction-table section-card">
    <div class="flex-between">
      <el-input v-model="keyword" size="small" placeholder="搜索" style="width: 300px;">
        <template #prefix>
          <el-icon size="16" style="margin-top: 5px;"><Search /></el-icon>
        </template>
      </el-input>
      <el-upload
        action=""
        accept=".csv"
        :show-file-list="false"
        :on-change="handleFileUpload"
      >
        <el-button size="small" icon="el-icon-upload">导入</el-button>
      </el-upload>
    </div>
    <el-table :data="transactions">
      <el-table-column prop="time" label="时间" />
      <el-table-column prop="content" label="交易内容" />
      <el-table-column prop="amount" label="金额" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="note" label="备注" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-icon size="20" color="#409eff" @click="editTransaction(scope.row)" class="mr-8"><Edit/></el-icon>
          <el-icon size="20" color="red" @click="deleteTransaction(scope.row)"><Delete/></el-icon>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Search, Edit, Delete } from '@element-plus/icons-vue';
import Papa from 'papaparse';
import { ipcRenderer } from 'electron';

const keyword = ref('');
const transactions = ref([]);

function handleFileUpload(file) {
  Papa.parse(file.raw, {
    header: false,
    complete: (results) => {
      const data = results.data;
      console.log(1111, data.slice(0, 30));
      const transactions = [];
      let headers = [];
      
      const wechatHeaderIndex = data.findIndex(row => row[0] === '交易时间' && row[1] === '交易类型');
      const alipayHeaderIndex = data.findIndex(row => row[0] === '交易时间' && row[1] === '交易分类');

      if (wechatHeaderIndex !== -1) {
        headers = data[wechatHeaderIndex];
      } else if (alipayHeaderIndex !== -1) {
        headers = data[alipayHeaderIndex];
      }

      for (let i = (wechatHeaderIndex !== -1 ? wechatHeaderIndex : alipayHeaderIndex) + 1; i < data.length; i++) {
        const row = data[i];
        if (row[0]) {
          const transaction = {
            time: row[headers.indexOf('交易时间')],
            category: row[headers.indexOf('交易分类')] || row[headers.indexOf('交易类型')],
            counterpart: row[headers.indexOf('交易对方')],
            description: row[headers.indexOf('商品说明')] || row[headers.indexOf('商品')],
            type: row[headers.indexOf('收/支')],
            amount: parseFloat((row[headers.indexOf('金额')] || row[headers.indexOf('金额(元)')]).replace('¥', '')),
            paymentMethod: row[headers.indexOf('收/付款方式')] || row[headers.indexOf('支付方式')],
            status: row[headers.indexOf('交易状态')] || row[headers.indexOf('当前状态')],
            transactionId: row[headers.indexOf('交易订单号')] || row[headers.indexOf('交易单号')],
            merchantOrderId: row[headers.indexOf('商家订单号')] || row[headers.indexOf('商户单号')],
            note: row[headers.indexOf('备注')]
          };
          transactions.push(transaction);
        }
      }

      console.log(2222, transactions);
      // transactions.value = transactions;
      // saveDataToLocal(transactions);
    },
  });
}

function saveDataToLocal(data) {
  // ipcRenderer.send('save-data', data);
}

function editTransaction(row) {
  // 编辑逻辑
}

function deleteTransaction(row) {
  // 删除逻辑
}
</script>

<style scoped>
.transaction-table {
}
</style> 